<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>simple</title>
    <style>
      .a {
        /* 144 148 */
        width: 144px;
        height: 148px;
        /* background-color: blue; */
        /* background-image: url("./imgs/sprite.png"); */
      }
      .g {
        /* 120 160 */
        /* 261 313 */
        width: 140px;
        height: 160px;
        /* background-image: url("./imgs/sprite.png"); */
        background-position: -120px -160px;
      }
      .r {
        /* 左上坐标： 162 514 */
        /* 右下坐标： 317 660 */
        width: 155px;
        height: 146px;
        /* background-image: url("./imgs/sprite.png"); */
        background-position: -162px -514px;
      }
      .e {
        /* 588 5 */
        /* 738 146 */
        width: calc(738px - 588px);
        height: calc(146px - 5px);

        background-position: -588px -5px;
      }
      .font {
        background-image: url("./imgs/sprite.png");
      }
      .x {
        display: block;
      }
      @media screen and (min-width: 1024px) {
        .x {
          color: saddlebrown;
          font-size: 50px;
          font-weight: bolder;
        }
      }
      /* 480 - 1024 */
      @media screen and (max-width: 1024px) and (min-width: 480px) {
        .x {
          color: blue;
          font-size: 50px;
          font-weight: bolder;
        }
      }
      @media screen and (max-width: 480px) {
        .x {
          color: red;
        }
      }

      @media print {
        .x {
          display: none;
        }
        .y {
          font-size: 40px;
          font-weight: bold;
          color: brown;
        }
      }
    </style>
  </head>
  <body>
    <div class="font a"></div>
    <div class="font g"></div>
    <div class="font r"></div>
    <div class="font e"></div>
    <div class="font e"></div>
    <div class="x">xxxxxxxxxxxxxx</div>
    <div class="y">yyyyyyyyyyyyyy</div>
  </body>
</html>
